<script setup lang="ts">
import { initRouter } from '@/router/utils'
import { storageSession } from '@pureadmin/utils'
import { type CSSProperties, ref, computed } from 'vue'
import { useUserStoreHook } from '@/store/modules/user'
import { usePermissionStoreHook } from '@/store/modules/permission'

defineOptions({
  name: 'PermissionPage'
})

const elStyle = computed((): CSSProperties => {
  return {
    width: '85vw',
    justifyContent: 'start'
  }
})

const username = ref(useUserStoreHook()?.username)

const options = [
  {
    value: 'admin',
    label: '管理员角色'
  },
  {
    value: 'common',
    label: '普通角色'
  }
]

function onChange() {
  useUserStoreHook()
    .loginByUsername({ username: username.value, password: 'admin123' })
    .then(res => {
      if (res.success) {
        storageSession().removeItem('async-routes')
        usePermissionStoreHook().clearAllCachePage()
        initRouter()
      }
    })
}
</script>

<template>
  <el-space direction="vertical" size="large">
    <el-tag :style="elStyle" size="large" effect="dark">
      模拟后台根据不同角色返回对应路由（具体参考完整版pure-admin代码）
    </el-tag>
    <el-card shadow="never" :style="elStyle">
      <template #header>
        <div class="card-header">
          <span>当前角色：{{ username }}</span>
        </div>
      </template>
      <el-select v-model="username" @change="onChange">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-card>
  </el-space>
</template>
